<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>

    <input id="upUpdatePicture_cyt" hidden th:value="${productId.productId}">
    <table id="table"></table>
    <br>
    <input type="button" class="btn" value="返回" style="width: 150px" onclick="fanhui_caiyuntong()">

</body>
<script>
    $(function (){
        findParticularsData();
    })

    function findParticularsData(){
        var productId = $("#upUpdatePicture_cyt").val()
        $("#table").bootstrapTable({
            url:"findParticularsData?productId="+productId,
            columns:[
                {field:'materialsUserName',title:'供应商'},
                {field:'materialsType',title:'类目'},
                {field:'materialsName',title:'材料名称'},
                {field:'materialsCount',title:'材料数量'},
                {field:'materialsId',title:'材料编号'},
                {field:'productName',title:'项目名称'},
                {field:'contacts',title:'联系人名称'},
                {field:'contactsPhone',title:'联系人电话'},
                {field:'pictureName',title:'提供图片',formatter:function (value,row){
                    return '<img src='+value+' width="100px" height="100px">'
                }},
            ],

            pagination:true,//是否启用分页
            pageSize:3,//每页的记录行数（*）
            pageList:[3,6,9],//可供选择的每页的行数（*）
            showRefresh: false,//是否显示刷新按钮
            cardView: false,//是否显示详细视图
            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        })
    }

    function fanhui_caiyuntong(){
        location.href="findPicture.html"
    }

</script>
</html>